<template>
  <div id="PharmaceuticalCompanies">
    <div class="header-container">
      <div class="header-title">
        <i class="el-icon-office-building title-icon"></i>
        <h1>医药公司管理</h1>
      </div>
      
      <div class="search-container">
        <el-input placeholder="请输入ID" prefix-icon="el-icon-search" v-model="company_id" size="medium"
            class="header-input" clearable />
        <el-input placeholder="请输入医药公司名称" prefix-icon="el-icon-search" v-model="company_name" size="medium"
            class="header-input" clearable />
        <el-select v-model="city_name" placeholder="请选择城市" size="medium" class="header-select" clearable>
            <el-option v-for="item in cityList" :key="item.city_id" :label="item.city_name"
                :value="item.city_name" />
        </el-select>
        <el-button id="search" type="primary" icon="el-icon-search" @click="search()" size="medium"
            class="header-btn">搜索</el-button>
        <el-button id="reset" type="info" icon="el-icon-refresh" @click="resetSearch()" size="medium"
            class="header-btn">重置</el-button>
      </div>
      
      <el-button type="success" class="add-button header-btn" icon="el-icon-circle-plus" @click="addDrugCompany()"
          size="medium">新增医药公司</el-button>
    </div>

    <el-card class="table-card">
      <el-table :data="pm.list" border style="width: 100%" class="company-table">
        <el-table-column fixed prop="company_id" label="ID" width="100" align="center">
          <template slot-scope="scope">
            <el-tag size="medium" type="primary">{{ scope.row.company_id }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="company_name" label="公司名称" min-width="200" align="center">
          <template slot-scope="scope">
            <span class="company-name">{{ scope.row.company_name }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="company_phone" label="公司电话" width="150" align="center">
          <template slot-scope="scope">
            <i class="el-icon-phone phone-icon"></i>
            <span>{{ scope.row.company_phone }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="city.city_name" label="所属城市" width="120" align="center">
          <template slot-scope="scope">
            <el-tag size="small" type="info">{{ scope.row.city.city_name }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="latitude" label="纬度" width="120" align="center">
        </el-table-column>

        <el-table-column prop="longitude" label="经度" width="120" align="center">
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="warning" icon="el-icon-location" @click="showMapDialog(scope.row)" size="mini">地图</el-button>
            <el-button type="primary" icon="el-icon-edit" @click="updateDrugCompany(scope.row)" size="mini">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleteDrugCompany(scope.row.company_id)" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="pm.totalRecords"
        :page-size="pm.pageSize" :current-page="pm.currentPageNum" :page-sizes="[5, 10, 20, 50]"
        @size-change="sizeChange" @current-change="pageChange" style="margin-top: 20px; text-align: center;"
        class="pagination-container">
    </el-pagination>


    <el-dialog title="编辑医药公司信息" :visible.sync="updateFormvisible" :modal-append-to-body="false" width="450px" class="company-dialog">
      <div class="dialog-content">
        <el-form :model="drugCompany" :label-width="'90px'" label-position="left">
          <el-form-item label="公司名称">
            <el-input v-model="drugCompany.company_name" placeholder="请输入公司名称"></el-input>
          </el-form-item>

          <el-form-item label="公司电话">
            <el-input v-model="drugCompany.company_phone" placeholder="请输入公司电话"></el-input>
          </el-form-item>

          <el-form-item label="所属城市">
            <el-select v-model="drugCompany.city.city_id" placeholder="请选择所属城市" style="width: 100%;">
              <el-option v-for="item in cityList" :key="item.city_id" :label="item.city_name"
                  :value="item.city_id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="纬度">
            <el-input v-model="drugCompany.latitude" placeholder="请输入纬度"></el-input>
          </el-form-item>
          
          <el-form-item label="经度">
            <el-input v-model="drugCompany.longitude" placeholder="请输入经度"></el-input>
          </el-form-item>
        </el-form>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUpdate()">取 消</el-button>
        <el-button type="primary" @click="submmitUpdate()">提 交</el-button>
      </div>
    </el-dialog>


    <el-dialog title="新增医药公司" :visible.sync="addFormvisible" :modal-append-to-body="false" width="450px" class="company-dialog">
      <div class="dialog-content">
        <el-form :model="drugCompany" :label-width="'90px'" label-position="left">
          <el-form-item label="公司名称">
            <el-input v-model="drugCompany.company_name" placeholder="请输入公司名称"></el-input>
          </el-form-item>

          <el-form-item label="公司电话">
            <el-input v-model="drugCompany.company_phone" placeholder="请输入公司电话"></el-input>
          </el-form-item>

          <el-form-item label="所属城市">
            <el-select v-model="drugCompany.city.city_id" placeholder="请选择所属城市" style="width: 100%;">
              <el-option v-for="item in cityList" :key="item.city_id" :label="item.city_name"
                  :value="item.city_id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="纬度">
            <el-input v-model="drugCompany.latitude" placeholder="请输入纬度"></el-input>
          </el-form-item>
          
          <el-form-item label="经度">
            <el-input v-model="drugCompany.longitude" placeholder="请输入经度"></el-input>
          </el-form-item>
        </el-form>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd()">取 消</el-button>
        <el-button type="primary" @click="submmitAdd()">提 交</el-button>
      </div>
    </el-dialog>

    <!-- 地图弹窗 -->
    <el-dialog 
      title="地图定位" 
      :visible.sync="mapDialogVisible" 
      width="800px"
      :modal-append-to-body="false"
      @opened="initMap"
      class="map-dialog"
    >
      <div id="mapContainer" style="width: 100%; height: 400px;"></div>
      <div class="map-info" v-if="currentLocation.name">
        <p><strong>公司名称：</strong>{{ currentLocation.name }}</p>
        <p><strong>坐标：</strong>纬度 {{ currentLocation.latitude }}，经度 {{ currentLocation.longitude }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mapDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
/* eslint-disable no-undef */
import axios from 'axios';

export default {
    name: "PharmaceuticalCompanies",
    data() {
        return {
            pm: {
                currentPageNum: 1,
                totalRecords: 0,
                pageSize: 5,
                totalPageNum: 0,
                startIndex: 0,
                prePageNum: 0,
                nextPageNum: 0,
                list: [],
                startPage: 0,
                endPage: 0
            },
            drugCompany: {
                company_id: null,
                company_name: "",
                company_phone: "",
                latitude: null,
                longitude: null,
                city: {
                    city_id: null,
                    city_name: ""
                }
            },
            cityList: [],
            updateFormvisible: false,
            addFormvisible: false,
            company_id: null,
            company_name: "",
            city_name: "",
            mapDialogVisible: false,
            currentLocation: {
                latitude: null,
                longitude: null,
                name: ''
            }
        }
    },
    mounted() {
        this.getDrugCompanyPage(1);
        this.getCityList();
    },
    methods: {
        getDrugCompanyPage(e) {
            axios.get("http://localhost:8080/getDrugCompanyPage", { params: { num: e, size: this.pm.pageSize } }).then(res => {
                this.pm = res.data;
            })
        },
        sizeChange(size) {
            this.pm.pageSize = size;
            this.getDrugCompanyPage(1);
        },
        pageChange(num) {
            this.getDrugCompanyPage(num);
        },
        deleteDrugCompany(company_id) {
            this.$confirm('确定删除该医药公司信息吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              axios.delete("http://localhost:8080/deleteDrugCompany", { params: { company_id } }).then(res => {
                this.$message.success(res.data);
                this.getDrugCompanyPage(1);
              }).catch(() => {
                this.$message.error('删除失败');
              });
            }).catch(() => {
              this.$message.info('已取消删除');
            });
        },
        getCityList() {
            axios.get("http://localhost:8080/getCityList").then(res => {
                this.cityList = res.data;
            })
        },
        updateDrugCompany(dc) {
            this.drugCompany = {...dc};
            this.getCityList();
            this.updateFormvisible = true;
        },
        submmitUpdate() {
            axios.put("http://localhost:8080/updateDrugCompany", this.drugCompany).then(res => {
                this.$message.success(res.data);
                this.resetDrugCompany();
                this.updateFormvisible = false;
                this.getDrugCompanyPage(this.pm.currentPageNum);
            }).catch(() => {
              this.$message.error('更新失败');
            });
        },
        cancelUpdate() {
            this.resetDrugCompany();
            this.updateFormvisible = false;
        },
        resetDrugCompany() {
            this.drugCompany = {
                company_id: null,
                company_name: "",
                company_phone: "",
                latitude: null,
                longitude: null,
                city: {
                    city_id: null,
                    city_name: ""
                }
            }
        },
        addDrugCompany() {
            this.resetDrugCompany();
            this.addFormvisible = true;
        },
        submmitAdd() {
            axios.post("http://localhost:8080/addDrugCompany", this.drugCompany).then(res => {
                this.$message.success(res.data);
                this.addFormvisible = false;
                this.resetDrugCompany();
                this.getDrugCompanyPage(1);
            }).catch(() => {
              this.$message.error('添加失败');
            });
        },
        cancelAdd() {
            this.resetDrugCompany();
            this.addFormvisible = false;
        },
        search() {
            axios.get("http://localhost:8080/getDrugCompanyByConditions", { params: { company_id: this.company_id, company_name: this.company_name, city_name: this.city_name } }).then(res => {
                this.pm.list = res.data;
            })
        },
        resetSearch() {
            this.resetConditions();
            this.getDrugCompanyPage(1);
        },
        resetConditions() {
            this.company_id = null;
            this.company_name = "";
            this.city_name = "";
        },
        showMapDialog(row) {
            this.currentLocation = {
                latitude: row.latitude,
                longitude: row.longitude,
                name: row.company_name || '未知'
            }
            this.mapDialogVisible = true
        },
        initMap() {
            this.$nextTick(() => {
                const { latitude, longitude, name } = this.currentLocation
                if (!latitude || !longitude) {
                    this.$message.warning('该公司暂无坐标信息');
                    return;
                }
                
                const map = new BMap.Map('mapContainer')
                const point = new BMap.Point(longitude, latitude)
                map.centerAndZoom(point, 16)
                map.addControl(new BMap.NavigationControl())
                map.enableScrollWheelZoom(true)
                
                const marker = new BMap.Marker(point)
                map.addOverlay(marker)
                const label = new BMap.Label(name, { offset: new BMap.Size(20, -10) })
                marker.setLabel(label)
                map.panTo(point)
            })
        }
    }
}
</script>

<style scoped>
#PharmaceuticalCompanies {
    width: 100%;
    height: 100%;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
    min-height: calc(100vh - 40px);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(120deg, #ffffff 0%, #f8f9ff 100%);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e6ebf5;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-title h1 {
    font-size: 26px;
    margin: 0;
    background: linear-gradient(90deg, #409eff, #64b5f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.title-icon {
    font-size: 28px;
    color: #409eff;
}

.search-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-input,
.header-select {
    width: 180px;
    height: 40px;
    border-radius: 20px;
}

.header-input ::v-deep .el-input__inner,
.header-select ::v-deep .el-input__inner {
    border-radius: 20px;
}

.header-btn {
    height: 40px;
    min-width: 90px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.header-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.add-button {
    background: linear-gradient(120deg, #67c23a, #95d475);
    border: none;
    color: white;
}

.table-card {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e6ebf5;
    overflow: hidden;
}

.company-table {
    border-radius: 12px;
}

.company-table ::v-deep .el-table__header th {
    background-color: #f0f5ff;
    color: #333;
    font-weight: 600;
}

.company-table ::v-deep .el-table__row:hover {
    background-color: #f5f9ff;
    transition: background-color 0.3s;
}

.company-name {
    font-weight: 500;
    color: #409eff;
}

.phone-icon {
    margin-right: 5px;
    color: #409eff;
}

.pagination-container {
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.pagination-container ::v-deep .el-pagination button,
.pagination-container ::v-deep .el-pagination span:not([class*=suffix]) {
    border-radius: 6px;
}

.pagination-container ::v-deep .el-pagination .el-pager li {
    border-radius: 6px;
    margin: 0 2px;
}

.pagination-container ::v-deep .el-pagination .el-pager li.active {
    background-color: #409eff;
    color: white;
}

.company-dialog ::v-deep .el-dialog {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.company-dialog ::v-deep .el-dialog__header {
    background: linear-gradient(120deg, #f5f7fa 0%, #eef2f7 100%);
    border-bottom: 1px solid #e6ebf5;
    border-radius: 12px 12px 0 0 !important;
    padding: 20px;
}

.company-dialog ::v-deep .el-dialog__title {
    font-weight: 600;
    color: #303133;
    font-size: 18px;
}

.dialog-content {
    padding: 20px;
}

.company-dialog .el-form-item {
    margin-bottom: 22px;
}

.company-dialog ::v-deep .el-form-item__label {
    font-weight: 500;
    color: #555;
}

.dialog-footer {
    text-align: right;
    padding: 15px 20px;
    border-top: 1px solid #e6ebf5;
    background-color: #f5f7fa;
    border-radius: 0 0 12px 12px;
}

.map-dialog ::v-deep .el-dialog {
    border-radius: 12px;
}

.map-info {
    margin-top: 15px;
    padding: 15px;
    background-color: #f5f9ff;
    border-radius: 8px;
    border-left: 4px solid #409eff;
}

.map-info p {
    margin: 5px 0;
    color: #606266;
}

::v-deep .el-tag {
    border-radius: 12px;
}

::v-deep .el-button--mini {
    border-radius: 10px;
}
</style>